<script setup>
import { reactive } from "@vue/runtime-core";

// 定义变量接收数据
const bigData = reactive({ data: [] })
// 请求数据
const getData = () => {
  fetch('http://localhost:3001/').then(
    res => {
      return res.json()
    }
  ).then(
    res => {
      console.log(res);

      // 不分组
      bigData.data = [...res]
      // 分组
      // const datas = group(res)
      // for (let i = 0; i < datas.length; i++) {
      //   setTimeout(() => {
      //     bigData.data = [...bigData.data, ...datas[i]]
      //   }, 10);
      // }
    }
  ).catch(err => {
    console.log(err);
  })
}
// 数据分组
const group = (data) => {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 10000 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}

</script>
<template>
  <div class="container" @click="getData">
    <el-button type="primary">getData</el-button>
  </div>
  <ul>
    <li v-for="item in bigData.data" :key="item.id">{{ item.id }}</li>
  </ul>
</template>

<style lang="scss" scoped>
ul{
  height: 300px;
  overflow-y: scroll;
  background: pink;
}
</style>
